<template>
	<div class="home">
		<a-button type="primary">取消</a-button>
        <div>
            <router-link tag="button" to="/home/workbench">去menu demo</router-link>
            <router-view v-slot="{ Component }">
                <transition name="slide-fade">
                    <component :is="Component" />
                </transition>
            </router-view>
        </div>
		我的天呢
		<!-- <a-button @click="gotoWorkbench">控件</a-button>
		<div>
			<a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px; margin-left: 0px">
				<MenuUnfoldOutlined v-if="collapsed" />
				<MenuFoldOutlined v-else />
			</a-button>
			<a-menu model="inline" theme="dark" v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" @click="onClick" style="width: 256px">
				<template v-for="item in menus" :key="item.key">
						<a-sub-menu @titleClick="titleClick">
							<template #title>
								<span>{{ item.name }}</span>
							</template>
							<a-menu-item v-for="it in item.childMenu" :key="it.key">
								{{ it.name }}
							</a-menu-item>
						</a-sub-menu>
				</template>Í
			</a-menu>
		</div> -->

	</div>
</template>

<script>
import { Button } from 'ant-design-vue';
import {
	// MenuFoldOutlined,
	// MenuUnfoldOutlined,
	// PieChartOutlined,
	// MailOutlined,
	// DesktopOutlined,
	// InboxOutlined,
	// AppstoreOutlined,
} from '@ant-design/icons-vue';

let constMenus = [
	{
		name: "项目1",
		key: 'sub1',
		childMenu: [
			{
				key: "1",
				name: "子项目1"
			},
			{
				key: "2",
				name: "子项目2"
			}
		]
	},
	{
		name: "项目2",
		key: 'sub2',
		childMenu: [
			{
				key: "3",
				name: "子项目1"
			}
		]
	},
	{
		name: "项目3",
		key: 'sub3',
		childMenu: [
			{
				key: "4",
				name: "子项目1"
			},
			{
				key: "5",
				name: "子项目2"
			}
		]
	},
	{
		name: "项目4",
		key: 'sub4',
		childMenu: [
			{
				key: "6",
				name: "子项目1"
			},
			{
				key: "7",
				name: "子项目2"
			},
			{
				key: "8",
				name: "子项目3"
			}
		]
	}
]

// export default defineComponent({
// 	setup() {
// 		const state = reactive({
// 			collapsed: false,
// 			selectedKeys: [1],
// 			openKeys: [1],
// 			preOpenKeys: [1],
// 		})

// 		watch(
// 			() => state.openKeys,
// 			(val, oldVal) => {
// 				state.preOpenKeys = oldVal
// 			}
// 		);

// 		const toggleCollapsed = () => {
// 			state.collapsed = !state.collapsed;
// 			state.openKeys = state.collapsed ? [] : state.preOpenKeys;
// 		};

// 		return { ...toRefs(state), toggleCollapsed };
// 	},
// 	components: {
// 		MenuFoldOutlined,
// 		MenuUnfoldOutlined,
// 		PieChartOutlined,
// 		MailOutlined,
// 		DesktopOutlined,
// 		InboxOutlined,
// 		AppstoreOutlined,
// 	}
// });

export default {
	name: 'Home',
	props: {
		msg: String
	},
	components: {
		AButton: Button,
		// AMenu: Menu,
		// ASubMenu: Menu.SubMenu,
		// AMenuItem: Menu.Item,
		// MenuFoldOutlined,
		// MenuUnfoldOutlined
	},
	methods: {
		onClick() {
			console.log('tttt')
		},
		titleClick() {
			console.log("item")
		},
		toggleCollapsed() {
			this.collapsed = !this.collapsed
		},
        gotoWorkbench() {
            console.log(this.$router)
            this.$router.push('/home/workbench')
        }
	},
	data() {
		return {
			menus: constMenus,
			collapsed: true,
			selectedKeys: [1],
			openKeys: ['sub1'],
			preOpenKeys: [1],
		}
	},
	watch: {
		openKeys: {

		}
	},
	mounted() {

	}
}
</script>

<style scoped>
.home {
	min-height: 600px;
}
</style>